<template>
  <view class="wrap">
    <div class="turtle_mes">
      <div class="inp_box" @click="selDown = !selDown">
        <picker
          mode="selector"
          :range="typeOptions"
          :value="typeIndex"
          @change="onAccountChange"
          @cancel="selDown = !selDown"
        >
          <view class="picker">
            <view class="uni-input">{{ typeOptions[typeIndex] }}</view>
            <i class="iconfont select_down" :class="selDown?'sel_open':'sel_off'"> &#xe623;</i>
          </view>
        </picker>
      </div>
      <div class="inp_box">
        <textarea
          class="form_inp"
          v-model="formData.text_container"
          placeholder="输入记录内容（龟尺寸/产蛋记录）"
        ></textarea>
      </div>
      <div class="imgs_box">
        <div class="box_title">
          <span class="before_span"></span>
          上传记录图片
        </div>
        <ImageUpload v-model="imageUrls"/>
      </div>
    </div>

    <div class="add_turtle" @click="addRecord">提交</div>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { dateTimeStr } from '../../common/public';
import ImageUpload from '@/components/UploadImages';
import { authRequest } from '@/utils/authRequest.js';

// 响应式数据
const selDown = ref(false);
const theId = ref('');
const formData = reactive({
  title: '',
  text_container: '',
});
const nowTime = ref('');
const typeOptions = ref(['喂食', '换水', '记录', '其他']);
const typeIndex = ref(0);
const imageUrls = ref([]);
// 提交记录
const addRecord = async () => {
  if (!formData.text_container || !formData.text_container) {
    uni.showToast({
      duration: 3000,
      icon: 'none',
      title: '请补充完整信息后提交',
    });
    return;
  }

  try {
    const res = await authRequest('addRecordList', {
      turtle_id: theId.value,
      record: {
        time: nowTime.value,
        title: formData.title,
        type: typeIndex.value,
        text_container: formData.text_container,
        imgsList: imageUrls.value,
      },
    });

    uni.showToast({
      duration: 1000,
      icon: 'success',
      title: '提交成功',
    });

    setTimeout(() => {
      uni.navigateBack();
    }, 500);
  } catch (e) {
    console.error('提交失败:', e);
    uni.showToast({
      duration: 2000,
      icon: 'none',
      title: '提交失败，请重试',
    });
  }
};

const onAccountChange = (index) => {
  typeIndex.value = index.detail.value;
  selDown.value = !selDown.value;
};

// 初始化
onLoad((option) => {
  theId.value = option.id;
  nowTime.value = dateTimeStr('y-m-d');
  console.log('初始化时间:', nowTime.value);
});
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  padding: 20rpx;
  box-sizing: border-box;

  .turtle_mes {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .inp_box {
      margin-bottom: 30rpx;
    }

    .inp_box {
      background: #fff;
      padding: 28rpx 24rpx;
      border-radius: 20rpx;
      border: #3d836d solid 1rpx;
      .picker {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .select_down {
          font-size: 38rpx;
          transition: transform 0.3s ease;
        }
        .sel_open {
          transform: rotate(180deg);
        }

        .sel_off {
          transform: rotate(0deg);
        }
      }
    }
  }

  .add_turtle {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background: #3d836d;
    color: #fff;
    border-radius: 20rpx;
    font-size: 32rpx;
  }

  .box_title {
    font-weight: 500;
    display: flex;
    align-items: center;
    .before_span {
      display: inline-block;
      width: 6rpx;
      height: 32rpx;
      background: #3d836d;
      margin-right: 12rpx;
    }
  }
}
</style>
